<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 590px;
            height: 340px;
            margin: 20px;
            border: 1px solid #e4e4e4;
        }

        .tab-nav {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 60px;
            line-height: 60px;
        }

        .tab-nav h3 {
            margin-left: 20px;
            font-size: 24px;
            font-weight: normal;
        }

        .tab-nav ul {
            display: flex;
            justify-content: flex-end;
            list-style: none;
        }

        .tab-nav ul li {
            margin: 0 20px;
            font-size: 14px;
        }

        .tab-nav ul li a {
            border-bottom: 2px solid transparent;
            text-decoration: none;
            color: #333;
        }

        .tab-nav ul li a.active {
            border-color: #e1251b;
            color: #e1251b;
        }

        .tab-content {
            padding: 0 16px;
        }

        .tab-content .item {
            display: none;
        }

        .tab-content .item.active {
            display: block;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="tab-nav">
        <h3>每日特价</h3>
        <ul>
            <li><a class="active" href="javascript:;">精选</a></li>
            <li><a href="javascript:;">美食</a></li>
            <li><a href="javascript:;">百货</a></li>
            <li><a href="javascript:;">个护</a></li>
            <li><a href="javascript:;">预告</a></li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="item active"><img src="./images/tab00.png" alt="" /></div>
        <div class="item"><img src="./images/tab01.png" alt="" /></div>
        <div class="item"><img src="./images/tab02.png" alt="" /></div>
        <div class="item"><img src="./images/tab03.png" alt="" /></div>
        <div class="item"><img src="./images/tab04.png" alt="" /></div>
    </div>
</div>
</body>
</html>
<script>
    // 1.鼠标经过谁 高亮谁
    // 1.1获取所有的a标签
    const links = document.querySelectorAll('.tab-nav a')
    // 获取所有的大的盒子
    const items = document.querySelectorAll('.tab-content .item')
    console.log(items)
    // console.log(links)
    // 1.2 给所有的a标签绑定鼠标经过事件，鼠标经过就会高亮
    for (let i =0; i< links.length; i++){
        links[i].addEventListener('mouseenter', function (){
            console.log('经过了',this)
            // 1.3经过a标签是排他思想 高亮显示
            // 先干掉所有的标签颜色
            document.querySelector('.tab-nav .active').classList.remove('active')
            // 给当前的a标签设定active属性
            this.classList.add('active')
            // 需求2.底部盒子跟随变化
            // 2.1获取到当前经过的索引
            console.log('经过了',i)
            // 发现规律：a的索引对应的盒子正好是要显示的盒子的索引
            // 2.2通过排他思想 让大盒子实现切换隐藏
            document.querySelector('.tab-content .active').classList.remove('active')
            items[i].classList.add('active')
        })
    }




</script>